<template>
    <div class="header">
        <div class="wrapper">
            <div class="timer">
                <span class="cupNumber">共{{ cupNumber }}杯</span>
                <span class="cupTimer">{{ cupTimer }}</span>
            </div>
            <div class="content">
                <span class="textBox1">¥<b>{{ arr.money }}</b></span>
                <i>1杯</i>
                <span class="textBox2">vip全国通用</span>
                <span class="validity">期限:{{ firstTime }}-{{ lastTime }}</span>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue'

const props = defineProps(['arr' , 'lastTime','firstTime'])
const cupNumber = ref(1)
const cupTimer = ref('2022-12-19')

</script>

<style lang="scss" scoped>
.wrapper {
    position: relative;
    margin-top: 12px;
    width: 345px;
    height: 145px;
    left: 15px;
    background-color: rgba(255, 255, 255, 1);

    .timer {
        position: absolute;
        top: 15px;
        left: 15px;
        right: 15px;
        width: 315px;
        height: 21px;
        

        .cupNumber {
            position: absolute;
            display: inline-block;
            left: 0px;
            color: rgba(128, 128, 128, 1);
            font-size: 14px;
            width: 36px;
            height: 21px;
        }
        .cupTimer{
            position: absolute;
                display: inline-block;
                right: 0px;
                color: rgba(128, 128, 128, 1);
                font-size: 14px;
                width: 120px;
                height: 21px;
        }
    }
}

.content {
    position: absolute;
    width: 315px;
    height: 80px;
    top: 50px;
    left: 15px;
    bottom: 15px;
    right: 15px;
    color: rgba(80, 80, 80, 1);
    background-color: rgba(255, 255, 255, 1);
    box-shadow: rgba(242, 242, 242, 1) solid 1px;
    font-size: 14px;
    line-height: 150%;
    text-align: center;
    border: 1px solid rgba(242, 242, 242, 1);
}

.textBox1 {
    position: absolute;
    width: 39px;
    height: 36px;
    left: 33px;
    top: 20px;
}

i {
    position: absolute;
    width: 45px;
    height: 17px;
    left: 36px;
    top: 40px;
    color: rgba(166, 166, 166, 1);
    font-size: 12px;
    line-height: 150%;
    text-align: left;
    transform: scale(0.8);
}

.validity {
    position: absolute;
    height: 17px;
    left: 112px;
    top: 40px;
    color: rgba(166, 166, 166, 1);
    font-size: 11px;
    line-height: 150%;
    text-align: left;
}

b {
    font-size: 24px;
    color: rgba(56, 56, 56, 1)
}

.textBox2 {
    position: absolute;
    width: 80px;
    height: 21px;
    left: 112px;
    top: 20px;
    color: rgba(56, 56, 56, 1);
    font-size: 14px;
    line-height: 150%;
    text-align: left;
}
</style>